<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:pb="http://b2b.pb.com/tags">

<ui:composition template="/template/MainTemplateFrms.xhtml">
   <ui:define name="body">
      <link href="#{applicationBean.contextRoot}/resources/css/#{applicationBean.cssTheme}/fileupload.css"
         rel="stylesheet" type="text/css" />
      <script type="text/javascript">
         /* function to display file name when selected */
         $.fn.fileName = function() {
            var $this = $(this),
            $val = $this.val(),
            valArray = $val.split('\\'),
            newVal = valArray[valArray.length-1],
            $button = $this.siblings('.customfile-feedback');
            if(newVal !== '') {
               //alert(newVal.substring(0,30));
               if(newVal.length > 25){
              	 newVal = newVal.substring(0,22) + '...';
               }
               $button.text(newVal);
            }
         };
         
         $().ready(function() {
            /* on change, focus or click call function fileName */
            $('input[type=file]').bind('change focus click', function() {$(this).fileName()});
         });
      </script>

      <pb:saveBean beanName="createMarkBean" bean="#{createMarkBean}" />

      <h:form enctype="multipart/form-data" id="bodyFrms">
         <p>
            <h:outputText value="#{markBundle.resim_format_aciklama}" />
         </p>

         <p:panel header="#{markBundle.create_mark_tbl_header}" styleClass="marginTop7">
            <p:panelGrid styleClass="zebra">
               <p:row>
                  <p:column style="width:30%;">
                     <h:outputText value="#{markBundle.lbl_mark_name} " />
                  </p:column>
                  <p:column style="width:70%;">
                     <p:inputText id="name" value="#{createMarkBean.name}" maxlength="30" />
                  </p:column>
               </p:row>
               <p:row>
                  <p:column>
                     <h:outputText value="#{markBundle.lbl_mark_logo}" />
                  </p:column>
                  <p:column>
                     <div>
                        <div class="customfile" style="float: left">
                           <div class="customfile-button"></div>
                           <span class="customfile-feedback">#{markBundle.lbl_resim_seciniz}</span>
                           <p:fileUpload styleClass="customfile-input" value="#{createMarkBean.file}" mode="simple"
                              sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" style="right:0; top: 0;" />
                        </div>
                        <!-- p:commandButton value="#{markBundle.btn_yukle}" ajax="false"
                           action="{createMarkBean.confirmAction}" styleClass="btn100" style="margin-top:6px;" /-->
                     </div>

                  </p:column>
                  <!-- p:column>
                     <p:commandButton actionListener="#{markBean.ornekResimIndir}"
                        onclick="PrimeFaces.monitorDownload(start, stop)" ajax="false"
                        value="#{markBundle.btn_ornek_resim}" id="download" styleClass="btn150">
                        <p:fileDownload value="#{markBean.ornekResim}" />
                     </p:commandButton>
                  </p:column-->
               </p:row>
            </p:panelGrid>
         </p:panel>

         <div class="btnRight marginTop7">
            <p:commandButton value="#{appbundle.btn_continue}" ajax="false" action="#{createMarkBean.confirmAction}"
               styleClass="btn100" />
         </div>

      </h:form>

      <p:dialog modal="true" widgetVar="statusDialog" showHeader="false" draggable="false" closable="false"
         resizable="false">
         <p:graphicImage value="/resources/images/ajax-loader.gif" />
      </p:dialog>

      <script type="text/javascript">  
         function start() {  
             statusDialog.show();  
         }  
           
         function stop() {  
             statusDialog.hide();  
         }  
      </script>

   </ui:define>
</ui:composition>
</html>

